<template>
  <div class="total-container">
    <div class="flex-container">
      <div v-if="!!leftData" class="left-box">
        <div class="item-box" v-for="(item, index) in leftData" :key="index">
          <div class="title">{{ item.title }}</div>
          <div class="row-2">
            <div class="num">{{ item.num1 }}</div>
            <div class="unit">{{ item.unit1 }}</div>
          </div>
          <div class="subtitle">{{ item.subtitle }}</div>
          <div class="row-4">
            <div class="num">{{ item.num2 }}</div>
            <div class="unit">{{ item.unit2 }}</div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="common-tab-box">
          <div
            class="tab"
            v-for="item in tabs"
            :class="{ active: currentSelectedId === item.id }"
            :key="item.id"
            @click="handleClick(item.id)"
          >{{ item.text }}</div>
        </div>
        <component :is="compName"></component>
      </div>
    </div>
  </div>
</template>
<script>
import economicallyDisadvantagedElderly from './tabComp/economicallyDisadvantagedElderly.vue'
import solitaryImpoverishedChildren from './tabComp/solitaryImpoverishedChildren.vue'
import disabledPeople from './tabComp/disabledPeople.vue'
import { getShflgk } from '@/api/socialSecurity'
export default {
  data() {
    return {
      leftData: null,
      tabs: [
        { text: '经济困难老人', id: 0, compName: 'economicallyDisadvantagedElderly' },
        { text: '孤困儿童', id: 1, compName: 'solitaryImpoverishedChildren' },
        { text: '残疾人', id: 2, compName: 'disabledPeople' }
      ],
      currentSelectedId: 0,
      compName: 'economicallyDisadvantagedElderly'
    }
  },
  components: {
    economicallyDisadvantagedElderly,
    solitaryImpoverishedChildren,
    disabledPeople
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleClick(id) {
      this.currentSelectedId = id
      this.compName = this.tabs[id].compName
    },
    async getData() {
      const res = await getShflgk()
      this.leftData = res.result.data.map(item => {
        return {
          title: item.person_type,
          subtitle: '补贴金额',
          num1: item.person_num,
          unit1: '人',
          num2: item.money,
          unit2: '万元'
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.total-container {
  .flex-container {
    display: flex;
    justify-content: space-between;
    align-items: start;
    .left-box {
      .item-box {
        width: 126px;
        height: 74px;
        background: url('../../img/right-row3-icon1.png') no-repeat center
          center;
        background-size: 100% 100%;
        margin-bottom: 10px;
        padding-top: 2px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .title {
          font-family: MicrosoftYaHei;
          font-size: 13px;
          color: #ffffff;
          line-height: 13px;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
        .subtitle {
          font-family: MicrosoftYaHei;
          font-size: 13px;
          color: #ffffff;
          line-height: 13px;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
        .row-2,
        .row-4 {
          display: flex;
          justify-content: center;
          align-items: baseline;
        }
        .num {
          font-family: MicrosoftYaHei, MicrosoftYaHei;
          font-weight: bold;
          font-size: 18px;
          color: #ffde00;
          line-height: 18px;
          text-align: right;
          font-style: normal;
          text-transform: none;
          background: radial-gradient(
            0deg,
            #ffffff 51%,
            #ffe5b9 54%,
            #ffc35b 100%
          );
        }
        .unit {
          font-family: MicrosoftYaHei;
          font-size: 12px;
          color: #ffffff;
          line-height: 12px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
    }
    .right-box {
      .common-tab-box > div {
        padding: 0 6px;
      }
      .tab {
        width: max-content;
      }
    }
  }
}
</style>
